<script setup lang="ts">
import {onMounted, ref, watch} from "vue";
import type {EChartsOption} from "echarts";
import * as echarts from "echarts";
import type {LineChartsProps} from "@/interface/line-charts.ts";
import type {EChartsType} from "echarts/core";

const line = ref()
const option = ref<EChartsOption>();
const props = defineProps<LineChartsProps>()
const myChart = ref<EChartsType>()
const init = () => {
  myChart.value = echarts.init(line.value);
  draw();
}
const draw = () => {
  option.value = {
    xAxis: {
      type: 'category',
      data: props.timeList
    },
    tooltip: {
      trigger: 'item',
      formatter:'{a}<br/>下单时间：{b}<br/>金额：￥{c}'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    axisPointer: {
      show: true
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: "销售额",
        data: props.dataList,
        type: 'line',
        smooth: true
      }
    ]
  };

  myChart.value.setOption(option.value, {notMerge: true});
}
watch(props, () => {
  draw();
});
onMounted(() => {
  init()
})
</script>

<template>
  <div ref="line" class="line"></div>
</template>

<style scoped>
.line {
  width: 100%;
  height: 100%;
}
</style>